<template>
  <a-button type="primary" @click="add_visible=true">添加课程</a-button>
  <a-modal v-model:visible="add_visible" title="新增课程" @ok="handleAddClick">
    <a-form
        :model="subject"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
    >
      <a-form-item
          label="课程名称"
          :rules="[{ required: true, message: '请输入课程名称' }]"
      >
        <a-input v-model:value="subject.subjectName" />
      </a-form-item>
      <a-form-item label="所属年级">
        <a-select
            ref="select"
            v-model:value="subject.gradeID"
            style="width: 120px"
        >
          <a-select-option v-for="item in grades"
                           :value="item.gradeID"
                           :key="item.gradeID">{{item.gradeName}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
          label="学时"
          :rules="[{ required: true, message: '请输入学时' }]"
      >
        <a-input v-model:value="subject.classHour" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:visible="update_visible" title="修改课程" @ok="handleUpdateClick">
    <a-form
        :model="subject"
        name="basic"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
    >
      <a-form-item label="课程编号">
        <a-input v-model:value="subject.subjectNo" disabled />
      </a-form-item>
      <a-form-item
          label="课程名称"
          :rules="[{ required: true, message: '请输入课程名称' }]"
      >
        <a-input v-model:value="subject.subjectName" />
      </a-form-item>
      <a-form-item label="所属年级" :rules="[{ required: true }]">
        <a-select
            ref="select"
            v-model:value="subject.gradeID"
            style="width: 120px"
        >
          <a-select-option v-for="item in grades"
                           :value="item.gradeID"
                           :key="item.gradeID">{{item.gradeName}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
          label="学时"
          :rules="[{ required: true, message: '请输入学时' }]"
      >
        <a-input v-model:value="subject.classHour" />
      </a-form-item>
    </a-form>
  </a-modal>
  <a-table :dataSource="subjects" :columns="columns" :pagination="{pageSize:3}">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <span>
          <a-button type="primary" @click="update_visible=true;this.subject=record;">修改</a-button>
          <a-divider type="vertical" />
           <a-popconfirm
               title="确认要删除该课程吗?"
               ok-text="删除"
               cancel-text="取消"
               @confirm="handleDeleteClick(record)"
           >
            <a-button type="primary" danger >删除</a-button>
          </a-popconfirm>
        </span>
      </template>
    </template>
  </a-table>
</template>
<script>
import axios from 'axios'
import { message } from 'ant-design-vue';
export default {
  data() {
    return {
      subjects: [],
      add_visible:false,
      update_visible:false,
      grades:[],
      subject:{
        subjectNo:'',
        subjectName:'',
        gradeID:'',
        classHour:''
      },
      columns: [
        {
          title: '课程编号',
          dataIndex: 'subjectNo',
          key: 'subjectNo',
        },
        {
          title: '课程名称',
          dataIndex: 'subjectName',
          key: 'subjectName',
        },
        {
          title: '所属年级',
          dataIndex: 'gradeID',
          key: 'gradeID',
        },
        {
          title: '学时',
          dataIndex: 'classHour',
          key: 'classHour',
        },
        {
          title: '操作',
          key: 'action',
        }
      ],
    };
  },
  methods:{
    loadsubjects(){
      axios.get('http://localhost:8080/subject/all')
          .then(res => {
            this.subjects = res.data.data
            console.log(this.subjects)
          })
    },
    loadgrades(){
      axios.get('http://localhost:8080/grade/all')
          .then(res => {
            this.grades = res.data.data
          })
    },
    handleDeleteClick(item){
      axios.post('http://localhost:8080/subject/delete?subjectNo='+item.subjectNo)
          .then(res => {
            if(res.data.success){
              message.success({
                content:'删除成功',
                style: {
                  marginTop: '20vh',
                },
              })
              this.loadsubjects()
            }
          })

    },
    handleAddClick(){
      axios.post('http://localhost:8080/subject/add',this.subject)
          .then(res => {
            if(res.data.success){
              // alert('添加成功')
              message.success({
                content:'添加成功',
                style: {
                  marginTop: '20vh',
                },
              })
              this.loadsubjects()
              //重置数据
              this.subject = {
                subjectName:'',
                gradeID:'',
                classHour:''
              }
            }
          })
    },
    handleUpdateClick(){
      axios.post('http://localhost:8080/subject/update',this.subject)
          .then(res => {
            if(res.data.success){
              message.success({
                content:'修改成功',
                style: {
                  marginTop: '20vh',
                },
              })
              this.update_visible = false
              this.loadsubjects()
              //重置数据
              this.subject = {
                subjectNo:'',
                subjectName:'',
                gradeID:'',
                classHour:''
              }
            }
          })
    }
  },
  created() {
    this.loadsubjects()
    this.loadgrades()
  }
};
</script>
<style scoped>
.ant-table-wrapper{
  margin-top: 10px;
}
</style>